import React, {Component,Fragment} from 'react';
import './App.css';

const award = require("./img/奖品图.png")
const uMoney = require("./img/U币.png")
const Popup = require("./img/弹窗顶部.png")
const redPack = require("./img/红包.png")
const thankVisit = require("./img/谢谢参与.png")

// Item组件--所有格子的操作都可以在此进行，如果这些操作都能与"activedId"关联就更好了
class RowItem extends Component {
    render() {
        const {content, activedId, imgUrl, spanContent, isStartPlay, handleBegin, isRolling} = this.props;
        return (
            <Fragment>
            {
              isStartPlay ? <td className="startPlay" onClick={handleBegin}></td>
                  :
                  <td className={activedId === content ? 'row__item-active' : null} id={`row_item_${content}`}>
                      <img src={imgUrl} alt={spanContent}/>
                      <span>{spanContent}</span>
                  </td>
            }
            </Fragment>
        )
    }
}


class PopContent extends Component{
    render() {
        const {awardContent,closeMask} = this.props;
        return(
            <div className="popMask">
                <div className="wrapContent">
                    <div className="popHeader"><img src={Popup} alt=""/></div>
                    {   awardContent?
                        <div className="popContent">恭喜您获得{awardContent}</div>
                        :<div className="popContent">今天抽奖次数已用完</div>
                    }

                    <div className="popFooter">
                        <div className="buttonFooter" onClick={closeMask}>朕知道了</div>
                    </div>
                </div>
            </div>
        )
    }
}


class App extends Component {
    constructor() {
        super()
        this.state = {
            // 九宫格内容list
            list: [0, 1, 2, 3, 4, 5, 6, 7],
            awardContentList: ["5元优惠券", "5枚U币", "现金红包", "谢谢参与", "10元优惠券", "10枚U币", "现金红包", "谢谢参与"],
            // 被选中的格子的ID
            activedId: '',
            // 中奖ID
            prizeId: null,
            // 获得prizeId之后计算出的动画次数
            times: 0,
            // 当前动画次数
            actTimes: 0,
            // 是否正在抽奖
            isRolling: false,
            // 是否抽过奖了
            isRollingOver:false,
            // 抽奖次数统计
            clickCounts:0,
            // 获奖内容
            awardContent:"",
            speed:300,
        }
    }

    handleBegin = () => {
        // this.state.isRolling为false的时候才能开始抽，不然会重复抽取，造成无法预知的后果
        if (!this.state.isRolling) {
            // 点击抽奖之后，我个人做法是将于九宫格有关的状态都还原默认
            this.setState({
                activedId: '',
                prizeId: null,
                times: 0,
                actTimes: 0,
                isRolling: true
            }, () => {
                // 状态还原之后才能开始真正的抽奖
                this.handlePlay()
            })
        }
    }

    intervalFun = (count)=>{

        this.beginSlow = setInterval(() => {
            count = this.intervalContent(count,this.beginSlow)
            if(count===8){
                clearInterval(this.beginSlow)
                this.setState({
                    speed:70,
                })
                this.intervalFun(count)
            }else if (count===32) {
                clearInterval(this.beginSlow)
                this.setState({
                    speed:300,
                })
                this.intervalFun(count)
            }
        }, this.state.speed)
    }

	intervalContent = (count,beginSlow)=>{
		let num;
		if (this.state.activedId === this.state.prizeId && this.state.actTimes > this.state.times) {
			// 符合上述所有条件时才是中奖的时候，两个ID相同并且动画执行的次数大于(或等于也行)设定的最小次数
			clearInterval(beginSlow);
			// console.log(this.state.awardContentList[this.state.activedId])
			// console.log("this.state.activedId",this.state.activedId)
			this.setState({
				isRolling: false,
				isRollingOver:true,
				clickCounts:this.state.clickCounts+1,
				awardContent:this.state.awardContentList[this.state.activedId],
			})
			return
		}

		// 以下是动画执行时对id的判断
		if (this.state.activedId === '') {
			num = 0
			this.setState({
				activedId: num
			})
		} else {
			num = this.state.activedId
			if (num >= 7) {
				num = 0
				this.setState({
					activedId: num
				})
			} else {
				num = num + 1
				this.setState({
					activedId: num
				})
			}
		}

		this.setState({
			actTimes: this.state.actTimes + 1
		})
		return count+1
	}

    handlePlay() {
        if(this.state.clickCounts<3){
            // 随机获取一个中奖ID
            let prize = Math.floor(Math.random() * 8)
            console.log(prize)
            this.setState({
                prizeId: prize,
                // prizeId: 0,
                activedId: 0
            })
            // 随机算出一个动画执行的最小次数，这里可以随机变更数值，按自己的需求来
            // let times = this.state.list.length * Math.floor(Math.random() * 5 + 4)
            let times = this.state.list.length * 4 // 如果对应的遍数改变了，那对应的后边的次数值也需要改变
            // let times = this.state.list.length
            this.setState({
                times: times
            })
            // 抽奖正式开始↓↓
			// console.log("this.state.actTimes",this.state.actTimes)
            let count = 0

			this.intervalFun(count);

        }else {
            this.setState({
                isRollingOver:true,
                clickCounts:this.state.clickCounts+1,
                isRolling:false,
            })
        }
    }

    closeMask = ()=>{
            this.setState({
                isRollingOver:false,
            })

    }

    render() {
        const { list, activedId, awardContentList, isRolling, isRollingOver, clickCounts} = this.state;
        return (
            <div>
                <div className='bg'>
                  {isRollingOver === false ?
                      <Fragment>
                          <div className="showCounts">您还有&nbsp;{ (3-clickCounts)>=0?(3-clickCounts):0 }&nbsp;次抽奖机会</div>
                        <div className={ isRolling?'containerRolling' :'container'}>
                              <table>
                                  <tbody>
                                  <tr className="headerTR">
                                    <RowItem content={list[0]} isRolling={isRolling} activedId={activedId} imgUrl={award} spanContent={awardContentList[0]} />
                                    <RowItem content={list[1]} isRolling={isRolling} activedId={activedId} imgUrl={uMoney} spanContent={awardContentList[1]} />
                                    <RowItem content={list[2]} isRolling={isRolling} activedId={activedId} imgUrl={redPack} spanContent={awardContentList[2]} />
                                  </tr>
                                  <tr className="centerTR">
                                    <RowItem content={list[7]} isRolling={isRolling} activedId={activedId} imgUrl={thankVisit} spanContent={awardContentList[7]} />
                                    <RowItem handleBegin={this.handleBegin} isStartPlay={true} />
                                    <RowItem content={list[3]} isRolling={isRolling} activedId={activedId} imgUrl={thankVisit} spanContent={awardContentList[3]} />
                                  </tr>
                                  <tr className="footerTR">
                                      {/*debugger*/}
                                    <RowItem content={list[6]} isRolling={isRolling} activedId={activedId} imgUrl={award} spanContent={awardContentList[4]} />
                                    <RowItem content={list[5]} isRolling={isRolling} activedId={activedId} imgUrl={uMoney} spanContent={awardContentList[5]} />
                                    <RowItem content={list[4]} isRolling={isRolling} activedId={activedId} imgUrl={redPack} spanContent={awardContentList[6]} />
                                  </tr>
                                  </tbody>
                              </table>
                        </div>
                      </Fragment>
                      :
                        <Fragment>
                            {   clickCounts<=3?
                                <PopContent awardContent={this.state.awardContent} closeMask={this.closeMask}/>
                                :
                                <PopContent awardContent={false} closeMask={this.closeMask}/>
                            }

                        </Fragment>
                  }
                </div>

            </div>
        );
    }
}

export default App;
